<template>
  <top-area></top-area>
  <div id="map"></div>
  <RouterView />
  <bottom-area></bottom-area>
  <div class="btn">
    <button @click="handleDirection">导航</button>
  </div>
</template>

<script setup>
import TopArea from '@/components/TopArea.vue'
import BottomArea from '@/components/BottomArea.vue'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { onMounted, ref, provide } from 'vue'
import { Scene } from '@antv/l7'
import { Mapbox } from '@antv/l7-maps'
import useControls from './hooks/useControls'
import MapboxDirections from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.js'
import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css'
let map = ref(null)
let scene = ref(null)
let isDirectionShow = ref(false)
let handleDirection
const MAPBOX_TOKEN =
  'pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA'
onMounted(() => {
  mapboxgl.accessToken = MAPBOX_TOKEN
  map.value = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v11',
    center: [114.299, 30.585],
    zoom: 1,
    projection: 'globe',
  })
  scene.value = new Scene({
    id: 'map',
    map: new Mapbox({
      mapInstance: map.value,
    }),
    logoVisible: false,
  })
  map.value.on('load', function () {
    //添加雾化效果 这个效果 跟中心点位置关联
    //采用了Hsl的颜色值 改变的是lightness值 越靠近中心点 越暗 越靠远中心点 越亮
    fog()
  })
  map.value.on('move', fog)
  function fog() {
    let center = map.value.getCenter()
    map.value.setFog({
      color: `hsl(0, 0%,${Math.abs(center.lng / 360)})`,
      'high-color': `hsl(0, 0%,${Math.abs(center.lng / 360)})`,
    })
  }
  //添加地图控件(推荐使用l7控件)
  useControls(scene.value, map.value)
  const directions = new MapboxDirections({
    accessToken: MAPBOX_TOKEN,
  })
  handleDirection = () => {
    isDirectionShow.value = !isDirectionShow.value
    if (isDirectionShow.value) {
      map.value.addControl(directions, 'top-left')
    } else {
      map.value.removeControl(directions)
    }
  }
  provide('mapScene', {
    map: map.value,
    scene: scene.value,
  })
})
</script>

<style lang="scss" scoped>
#map {
  width: 100vw;
  height: 100vh;
}
.btn {
  position: fixed;
  top: 200px;
  left: 10px;
  button {
    padding: 10px 20px;
  }
}
</style>
